<template>
  <div>
    <div>{{ this.$store.state.CityHook.city }}</div>
    <button v-for="item of hots" :key="item" @click="handleCity(item)">
      {{ item }}
    </button>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { mapMutations } from "vuex";
export default {
  setup() {
    const state = reactive({
      hots: ["长安", "荆州", "金陵", "洛阳"],
      // changeCity(city) {
      //   this.$store.commit("changeCity", city);
      // },
      ...mapMutations(["changeCity"]),
      handleCity(city) {
        this.changeCity(city);
        this.$router.back();
      },
    });
    const refState = toRefs(state);
    return {
      ...refState,
    };
  },
};
</script>

<style>
</style>